<template>
  <div class="wrap">
    <button class="create-agent-btn" @click="createAgent">创建智能体</button>

    <!-- tab菜单 -->
    <div class="menu-wrap">
      <div
        :class="['menu', currentIndex == 0 ? 'menu-active' : '']"
        @click="menuClick(0)"
      >
        <i class="iconfont icongongzuotai" /> 工作
      </div>
      <div
        :class="['menu', currentIndex == 1 ? 'menu-active' : '']"
        @click="menuClick(1)"
      >
        <i class="iconfont iconxuexi" /> 学习
      </div>
      <div
        :class="['menu', currentIndex == 2 ? 'menu-active' : '']"
        @click="menuClick(2)"
      >
        <i class="iconfont iconchuangzuo" /> 创作
      </div>
      <div
        :class="['menu', currentIndex == 3 ? 'menu-active' : '']"
        @click="menuClick(3)"
      >
        <i class="iconfont iconhuihua" /> 绘画
      </div>
      <div
        :class="['menu', currentIndex == 4 ? 'menu-active' : '']"
        @click="menuClick(4)"
      >
        <i class="iconfont iconshoucang" /> 收藏
      </div>
    </div>

    <!-- 智能体列表卡片 -->
    <div class="item-wrap" v-if="currentIndex !== 4">
      <div
        class="agent-card"
        v-for="(item, index) in dataList"
        :key="item"
        @click="incrementUsage(index)"
      >
        <img src="../assets/avatar.png" class="agent-avatar" />
        <div>
          <div class="agent-title">
            <div class="agent-name">{{ item.title }}</div>
            <div class="action-buttons">
              <i
                class="iconfont iconshoucang iconshoucang"
                @click.stop="toggleFavorite(index)"
              />
              <i
                class="iconfont iconchuangzuo edit-btn"
                @click.stop="editAgent(index)"
              />
              <i
                class="iconfont iconshanchu delete-btn"
                @click.stop="deleteAgent(index)"
              />
            </div>
          </div>
          <div class="agent-description">{{ item.description }}</div>
        </div>
      </div>
    </div>

    <div v-else class="item-wrap">
      <!-- 收藏列表展示 -->
      <div class="agent-card" v-for="(item, index) in favorites" :key="item">
        <img src="../assets/avatar.png" class="agent-avatar" />
        <div>
          <div class="agent-title">
            <div class="agent-name">{{ item.title }}</div>
            <div class="action-buttons2">
              <i
                class="iconfont iconshanchu delete-btn"
                @click="removeFromFavorites(index)"
              />
            </div>
          </div>
          <div class="agent-description">{{ item.description }}</div>
        </div>
      </div>
    </div>

    <!-- 创建智能体弹窗 -->
    <div v-show="menuShow">
      <div class="dialog">
        <div class="dialog-title">
          <i class="iconfont iconshanchu del-icon" @click="menuShow = false" />
        </div>
        <div class="dialog-form-wrap">
          <div class="dialog-form">
            <div class="label">名称</div>
            <input class="ipt" v-model="title" />
          </div>
          <div class="dialog-form">
            <div class="label">描述</div>
            <input class="ipt" v-model="description" />
          </div>
          <div class="dialog-form">
            <div class="label">类型</div>
            <div>
              <label>
                <input type="radio" v-model="selectedType" value="0" /> 工作
              </label>
              <label>
                <input type="radio" v-model="selectedType" value="1" /> 学习
              </label>
              <label>
                <input type="radio" v-model="selectedType" value="2" /> 创作
              </label>
              <label>
                <input type="radio" v-model="selectedType" value="3" /> 绘画
              </label>
            </div>
          </div>
          <div class="add-btn" @click="onAdd">确认</div>
        </div>
      </div>
      <div class="mask" @click="menuShow = false"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      work: [
        {
          usageCount: 4,
          isFavorite: false,
          title: "Python",
          description: "一位精通 Python3 且耐心友好的问题解决专家",
        },
        {
          usageCount: 3,
          isFavorite: false,
          title: "PPT大纲",
          description: "能为给定主题生成逻辑清晰、内容完整的 PPT 大纲",
        },
        {
          usageCount: 2,
          isFavorite: false,
          title: "Java架构师",
          description: "一位全能的资深 Java 技术专家，助力解决各类技术难题",
        },
        {
          usageCount: 1,
          isFavorite: false,
          title: "产品需求方案策划",
          description: "专业提供全面产品需求方案规划与分析的服务角色",
        },
      ],
      study: [
        {
          usageCount: 2,
          isFavorite: false,
          title: "每日英语背诵",
          description: "专业英语老师，按学生情况推送经典英语片段，助力学习",
        },
        {
          usageCount: 1,
          isFavorite: false,
          title: "小学数学辅导",
          description: "能精准简洁辅导小学数学，答案清晰且辅例易懂",
        },
      ],
      creation: [
        {
          usageCount: 2,
          isFavorite: false,
          title: "小说生成器",
          description: "能生成多种类型小说大纲并提供创作指导的创意工具",
        },
        {
          usageCount: 1,
          isFavorite: false,
          title: "短视频灵感",
          description: "创意短视频顾问，提供趣味灵感助你创作走红视频。",
        },
      ],
      painting: [
        {
          usageCount: 3,
          isFavorite: false,
          title: "国风山水画",
          description:
            "这里是国风山水画生成器！给我一个关键词，通达墨色的景致，诉说心中的诗意～",
        },
        {
          usageCount: 2,
          isFavorite: false,
          title: "矢量插图",
          description: "擅长多种风格的明亮配色平面插图创作",
        },
        {
          usageCount: 1,
          isFavorite: false,
          title: "绘本风格画",
          description: "能绘制华丽细腻、构图完美且高分辨率的绘本风格画作",
        },
      ],
      dataList: [], // 数据列表
      currentIndex: 0, // 当前选中的索引
      title: "", // 名称
      description: "", // 描述
      menuShow: false, // 菜单显示
      selectedType: "0", // 选中的类型
      editingIndex: 0, // 编辑的索引
      isEdit: false, // 是否是编辑模式
      favorites: [],
    };
  },
  mounted() {
    this.dataList = this.work;
  },
  methods: {
    menuClick(index) {
      this.currentIndex = index;
      switch (index) {
        case 0:
          this.dataList = this.work;
          break;
        case 1:
          this.dataList = this.study;
          break;
        case 2:
          this.dataList = this.creation;
          break;
        case 3:
          this.dataList = this.painting;
          break;
        case 4:
          this.dataList = this.favorites;
          break;
      }
    },
    createAgent() {
      this.menuShow = true;
      this.isEdit = false;
    },
    deleteAgent(index) {
      this.dataList.splice(index, 1);
    },
    editAgent(index) {
      this.menuShow = true;
      // 初始化表单类型为当前分类
      this.selectedType = this.currentIndex;
      // 从当前分类数组中获取要编辑的条目数据
      this.title = this.dataList[index].title;
      this.description = this.dataList[index].description;
      // 记录当前编辑的索引位置
      this.editingIndex = index;
      this.isEdit = true;
    },
    onAdd() {
      this.menuShow = false;
      if (this.isEdit) {
        // 构造新的条目对象
        const item = {
          title: this.title,
          description: this.description,
        };
        this.dataList[this.editingIndex] = item;
        // 类型一致性检查：当前分类与选择的类型是否相同
        if (this.currentIndex == this.selectedType) {
          // 类型一致时直接更新当前分类数据
          this.dataList[this.editingIndex] = item;
        } else {
          // 类型不一致时需要跨分类迁移数据
          // 获取原始分类数组（当前显示的分类）
          const targetArray = [
            this.work,
            this.study,
            this.creation,
            this.painting,
          ][this.selectedType];
          // 从原始分类删除条目
          this.dataList.splice(this.editingIndex, 1);
          // 添加到目标分类
          targetArray.push(item);
        }
      } else {
        // 新增条目模式
        const item = {
          title: this.title,
          description: this.description,
        };
        if (this.currentIndex == this.selectedType) {
          // 类型一致时直接更新当前分类数据
          this.dataList.push(item);
        } else {
          switch (this.selectedType) {
            case "0":
              this.work.push(item);
              break;
            case "1":
              this.study.push(item);
              break;
            case "2":
              this.creation.push(item);
              break;
            case "3":
              this.painting.push(item);
              break;
          }
        }
        this.title = "";
        this.description = "";
      }
    },
    toggleFavorite(index) {
      const item = this.dataList[index];
      // 更新 isFavorite 属性
      this.dataList[index].isFavorite = true;
      this.favorites.push(item);
    },
    removeFromFavorites(index) {
      // 从收藏列表中移除该项
      this.favorites.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 40px;
}
.menu-wrap {
  display: flex;
  gap: 20px;
  justify-content: center;
}
.menu {
  color: #000;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}
.menu-active {
  background-color: #000;
  color: #fff;
}

.item-wrap {
  display: flex;
  gap: 20px;
  margin-top: 50px;
  flex-wrap: wrap;
  width: 800px;
}

.agent-card {
  position: relative;
  width: 345px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  padding: 10px;
  display: flex;
  align-items: center;
}
.agent-title {
  display: flex;
  justify-content: space-between;
}
.agent-avatar {
  font-size: 40px;
  margin-right: 10px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid #e0e0e0;
}

.agent-name {
  font-size: 18px;
  margin-bottom: 5px;
}

.agent-description {
  font-size: 14px;
  color: #555;
  width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-bottom: 5px;
}
.search-bar {
  display: flex;
  gap: 15px;
  width: 100%;
  max-width: 800px;
  margin-bottom: 25px;
}

.create-agent-btn {
  top: 20px;
  right: 20px;
  padding: 10px 20px;
  font-size: 14px;
  color: #fff;
  background-color: #007bff; /* 蓝色背景 */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.create-agent-btn:hover {
  background-color: #0056b3; /* 深蓝色悬停效果 */
}
/* 对话框样式 */
.dialog {
  position: fixed;
  width: 500px;
  height: auto;
  top: 20%;
  left: 50%;
  margin-left: -250px;
  border: 1px solid #ccc;
  background: #fff;
  z-index: 100;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.dialog-title {
  height: 60px;
  line-height: 60px;
  background: #1890ff;
  text-align: right;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.del-icon {
  color: #fff;
  font-size: 20px;
  margin-right: 20px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.del-icon:hover {
  color: #ff4d4f;
}

.dialog-form-wrap {
  padding: 20px;
}

.dialog-form {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.label {
  width: 100px;
  font-size: 16px;
  color: #333;
  font-weight: bold;
}

.ipt {
  width: 300px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
  transition: border-color 0.3s ease;
}

.ipt:focus {
  border-color: #1890ff;
}

.dialog-form input[type="radio"] {
  margin-right: 5px;
}

.dialog-form label {
  margin-right: 20px;
  font-size: 14px;
  color: #555;
}

.add-btn {
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 20px;
  color: #fff;
  background: #1890ff;
  margin: 20px auto 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.add-btn:hover {
  background-color: #40a9ff;
}

.action-buttons {
  width: 80px;
  display: flex;
  justify-content: space-between;
}
.action-buttons2 {
  width: 20px;
  display: flex;
  justify-content: space-between;
}
.edit-btn,
.delete-btn {
  cursor: pointer;
  font-size: 18px;
  transition: color 0.3s ease;
}

.edit-btn:hover {
  color: #1890ff;
}

.delete-btn:hover {
  color: #ff4d4f;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ccc;
  opacity: 0.5;
  z-index: 10;
}

.add-btn {
  width: 80px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  background: #1890ff;
  margin-bottom: 10px;
  cursor: pointer;
}
.iconshoucang1 {
  color: #fa8d39;
}
.usage-count {
  color: #007bff;
  font-size: 14px;
}
</style>